<template>
	<view class="content">
		<view class="headNav"><h1>好装修</h1><view><span>登录</span><span>/  注册</span></view></view>
		<view class="cu-bar search bg-white">
			<view class="action">
				<text>杭州</text>
				<text class="cuIcon-triangledownfill"></text>
			</view>
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input class="text-center" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索" confirm-type="search">
			</view>
			<view class="imgwidth"><image src='../../static/images/pic109.png'></image></view>
		</view>
		<ul class="flex listNone">
			<li @tap="handInfoanLi"><image src="../../static/images/pic51.png"></image><view>整屋案例</view></li>
			<li @tap="handInfo"><image src="../../static/images/pic52.png"></image><view>装修公司</view></li>
			<li><image src="../../static/images/pic57.png"></image><view>找设计师</view></li>
			<li><image src="../../static/images/pic62.png"></image><view>算报价</view></li>
		</ul>
		<view class="picShow flex">
			<view>
				<image src='../../static/images/pic100.png'></image>
				<view>
					<h3>居家经验</h3>
					<p>看业主分享真实装修过程</p>
					<view class="flex">
						<view><image src='../../static/images/pic103.png'></image></view>
						<view><image src='../../static/images/pic102.png'></image></view>
						<view><image src='../../static/images/pic101.png'></image></view>
						<text>正在参加</text>
					</view>
				</view>
			</view>
			<view>
				<view><image src='../../static/images/pic105.png'></image><view><h3>效果图</h3><p>#美图#方案</p></view></view>
				<view><image src="../../static/images/pic106.png"></image><view><h3>学装修</h3><p>#视频教学</p></view></view>
			</view>
		</view>
		<view class="onSell">
			<h2>热销产品</h2>
			<swiper class="card-swiper">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<text>{{item.text}}</text>
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="spatial">
			<image src='../../static/images/pic88.png'></image>
			<view class="img1">
				<image src="../../static/images/pic33.png" mode="" class="img1-1"></image>
				<image src="../../static/images/pic35.png" mode="" class="img1-2"></image>
				<image src="../../static/images/pic37.png" mode="" class="img1-3"></image>
				<view class="title1">手把手教你把家放大</view>
				<view class="title2">SPATIAL EXPANSION</view>
			</view>
		</view>
		<view class="forU">
			<view class="flex">
				<h3 @tap="isShow=true"  :class="isShow==true?'':'grey'">为你精选</h3>
				<h3 @tap="isShow=false" :class="isShow==false?'':'grey'">设计圈</h3>
				<view :class="isShow==false?'greyLeft':''"></view>
			</view>
			<view v-if=isShow>
				<view v-for="(item,index) in 6" :key=index class="marginTop">
					<image src='../../static/images/pic87.png'></image>
					<h4>120m<sup>2</sup>现代四居，理性的黑白灰</h4>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" style="background-image:url(../../static/images/pic107.png)"></view>
							<view class="content flex-sub flex">
								<view class="text-grey">包图设计</view>
								<view class="text-gray text-sm">
									<text class="cuIcon-attentionfill margin-lr-xs"></text> 收藏
									<text class="cuIcon-appreciatefill margin-lr-xs"></text> 分享
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
			<Plan v-else></Plan>
		</view>
	</view>
</template>

<script>
	import Plan from './plan.vue' ;
	export default {
		components:{
			Plan
		},
		data() {
			return {
				isShow:true,
				swiperList: [
				{
					id: 0,
					text:'家具',
					type: 'image',
					url: '../../static/images/pic9.png'
				}, {
					id: 1,
					text:'建材',
					type: 'image',
					url: '../../static/images/pic26.png',
				}, {
					id: 2,
					text:'灯具',
					type: 'image',
					url: '../../static/images/pic3.png'
				},
				{
					id: 3,
					text:'装饰',
					type: 'image',
					url: '../../static/images/pic9.png',
				}, 
				{
					id: 4,
					text:'家具',
					type: 'image',
					url: '../../static/images/pic26.png',
				}, 
				{
					id: 5,
					text:'家具',
					type: 'image',
					url: '../../static/images/pic3.png',
				}
				]
			};
		},
		methods:{
			handInfo(){
				uni.navigateTo({
					url:'/pages/index/renovate'
				})
			},
			handInfoanLi(){
				uni.navigateTo({
					url:'/pages/index/renovateDitel'
				})
			}
		}
	}
</script>
		
		

<style lang="scss">
.headNav{
	padding: 28upx;
	display: flex;
	justify-content: space-between;
	h2{
		font-size: x-large;
	}
	span{
		position: relative;
		top: 30upx;
		color: #007AFF;
	}
}
.cu-bar {//顶部搜索框
	.imgwidth{
		width: 60upx;
		height: 35upx;
		padding-right: 24upx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
.listNone{//整屋案例的导航栏
	justify-content: space-around; 
	padding: 20upx 0;
	li{
		list-style: none;
		image{
			width: 160upx;
			height:140upx;
		}
		view{
			text-align: center;
			    position: relative;
			    top: -10upx;
			    font-size: small;
		}
	}
}
.picShow{//效果图
	padding:0 20upx;
	justify-content: space-around;
	>view{
		width: 48%;
		height: 300upx;
		position: relative;
		>image{
			width: 100%;
			height: 100%;
		}
	}
	>view:nth-of-type(1){
		>view{
			position: absolute;
			top: 15upx;
			left: 25upx;
			h3{
				color: #666;
			}
			p{
				font-size: 24upx;
				padding: 10upx 0;
				color: #5b5d63;
				font-family: unset;
			}
			>view{
				// padding: 20upx 0;
				>view{
					width: 40upx;
					height:40upx;
					border-radius:50%;
					image{
						width: 100%;
						height: 100%;
					}
				}
				>view:nth-of-type(2){
					position: relative;
					left: -10upx;
				}
				>view:nth-of-type(3){
					position: relative;
					left: -22upx;
				}
				text{
					font-size: 24upx;
					color: #5b5d63;
					font-family: unset;
				}
			}
		}
	}
	>view:nth-of-type(2){
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		>view{
			height:48%;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			>view{
				position: absolute;
				top: 10upx;
				left: 16upx;
				p{
					font-size: 24upx;
					padding-top: 5upx;
					color: #666;
					font-family: unset;
				}
			}
		}
	}
}
.onSell{
	padding: 26upx;
	.card-swiper{
		height: 160upx!important;
		swiper-item{
			width: 240upx!important;
			left: 0;
			padding:12upx 0;
			>view{
				width: 100%;
				height:110upx;
				display: inline-block;
				background: #f5f6f7;
				border-radius: 10upx;
				text{
					position: relative;
					top: 20upx;
					left: 20upx;
					font-size: larger;
					font-weight: 600;
				}
				image{
					width: 40%;
					height: 100%;
					position: absolute;
					right: 18upx;
					top: 10upx;
				}
			}
		}
	}
}
.spatial{
	width: 95%;
	height: 380upx;
	border-radius: 18upx;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	>image{
		width: 100%;
		height: 80%;
	}
	.img1{
		width: 471upx;
		height: 144upx;
		position: absolute;
		left:123upx;
		top: 199upx;
		
		>.img1-1{
			width: 100%;
			height: 100%;
			position: absolute;
			top: -100upx;
			z-index: 2;
		}
		>.img1-2{
			position: absolute;
			top: -114upx;
			left: -14upx;
			width: 18upx;
			height: 143upx;
			z-index: 3;
		}
		
		>.img1-3{
			height: 22upx;
			position: absolute;
			top: -116upx;
			left: -14upx;
			z-index: 4;
			width: 486upx!important;
		}
		.title1{
			position: absolute;
			top: -40px;
			left: 50upx;
			z-index: 15;
			font-weight:600;
			font-size: 40upx;
		}
		.title2{
			position: absolute;
			top: -10px;
			left: 80upx;
			z-index: 15;
			// font-weight:600;
			font-size: 32upx;
			color: #fff;
			background: #9eb8db;
		}
	}	
}
.forU{
	padding: 0 26upx;
	>view:nth-of-type(1){
		padding-bottom:10upx ;
		view{
			position: relative;
			width: 60upx;
			height: 8upx;
			background: #4190ff;
			border-radius: 5upx;
			top: 50upx;
			left: -200upx;
		}
	}
	h3:nth-of-type(2){
		position: relative;
		left:35upx;
	}
	.grey{
		color: #b6b3ba;
	}
	.greyLeft{
		left: -46upx!important;
	}
	>view{
		image{
			width: 100%!important;
			padding: 10upx 0;
		}
	}
	.flex-sub{
		justify-content: space-between;
	}
	.marginTop{
		margin-top: 20upx;
	}
}

</style>
